<template>
  <div class="kd_search">
    <div class="kd_search_left">
      <div class="kd_search_leftTop">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="kd_search_leftBottom">
        <span>角色名称:</span>
        <el-input placeholder="请输入角色名称" v-model="userParams.keyword" />
      </div>
    </div>
    <div class="kd_search_right">
      <el-button @click="resetFn">重置</el-button>
      <el-button type="primary" @click="roleApi">查询搜索</el-button>
    </div>
  </div>
  <div class="kd_username_add">
    <div class="kd_username_add_left">
      <el-icon><Tickets /></el-icon>
      <span>数据列表</span>
    </div>
    <div class="kd_username_add_right">
      <el-button type="primary" @click="addShow = true">添加</el-button>
    </div>
  </div>
  <el-table
    :data="roleList"
    border
    style="min-width: 700px; font-size: 12px"
    cell-class-name="align-c"
  >
    <el-table-column prop="id" label="编号" width="50" />
    <el-table-column prop="name" label="角色名称" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="adminCount" label="用户数" />
    <el-table-column prop="createTime" label="添加时间" width="170" />
    <el-table-column label="是否启用">
      <template #default="{ row }">
        <el-switch
          v-model="row.status"
          :active-value="1"
          :inactive-value="0"
          @change="roleStateFn(row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="178">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          size="small"
          @click="router.push(`/ums/allocMenu?id=${row.id}`)"
          >分配菜单</el-button
        >
        <el-button text type="primary" size="small" @click="router.push(`/ums/allocResource?id=${row.id}`)">分配资源</el-button>
        <el-button text type="primary" size="small" @click="editFn(row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="kd_pagination">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="userParams.pageNum"
        v-model:page-size="userParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        small
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="roleApi"
        @current-change="roleApi"
      />
    </ElConfigProvider>
    <addroleVue :show="addShow" @hidden="addHidden" :rowList="rowList" />
  </div>
  {{ rowList }}
</template>

<script lang="ts" setup>
import { ElMessage, ElConfigProvider } from "element-plus";
import { ref, reactive, getCurrentInstance } from "vue";
import { getRoleListApi, setReoStateApi } from "./api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import addroleVue from "./components/addrole.vue";
import { useRouter } from "vue-router";
const { proxy }: any = getCurrentInstance();
const router = useRouter();

const rowList = reactive<{
  id: number;
  name: string;
  description: string;
  status: number;
}>({
  id: 0,
  name: "",
  description: "",
  status: 0,
});
const editFn = (row: IRlist) => {
  rowList.id = row.id;
  rowList.description = row.description;
  rowList.name = row.name;
  rowList.status = row.status;
  addShow.value = true;
};

const addShow = ref(false);
const addHidden = (value?: boolean) => {
  rowList.description = "";
  rowList.name = "";
  rowList.status = 0;
  rowList.id = 0;
  addShow.value = false;
  if (value) roleApi();
};
const userParams = reactive<IUserParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});
const roleList = ref<IRlist[]>();
const total = ref(0);
const roleStateFn = (row: IRlist) => {
  console.log(row.id, row.status);

  setReoStateApi(row.id, row.status)
    .then((res) => {
      if (res.code === 200) {
        if (row.status === 1) {
          ElMessage.success("已开启");
        } else {
          ElMessage.success("已关闭");
        }
      } else {
        row.status = row.status == 1 ? 0 : 1;
      }
    })
    .catch(() => {
      row.status = row.status == 1 ? 0 : 1;
    });
};
// 重置
const resetFn = () => {
  userParams.keyword = "";
  roleApi();
};
// 请求列表数据
const roleApi = () => {
  getRoleListApi(userParams).then((res) => {
    if (res.code === 200) {
      total.value = res.data.total;
      roleList.value = res.data.list.filter((item) => {
        return (item.createTime = proxy.$filters.timeFormat(item.createTime));
      });
    }
  });
};
roleApi();
</script>

<style lang="scss" scoped>
:deep(.align-c),
:deep(.el-table__header) {
  .cell {
    text-align: center !important;
  }
}
.kd_search {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px 5px #eee;
  .kd_search_left {
    .kd_search_leftTop {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
        font-size: 13px;
        color: rgb(69, 69, 69);
      }
    }
    .kd_search_leftBottom {
      width: 358px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
      :deep(.el-input) {
        width: 200px;
      }
      span {
        padding-right: 10px;
        font-size: 13px;
        color: rgb(69, 69, 69);
      }
    }
  }
  .kd_search_right {
  }
}
.kd_username_add {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 0 5px 5px #eee;
  margin: 20px 0;
  .kd_username_add_left {
    display: flex;
    align-items: center;
    span {
      padding-left: 10px;
    }
  }
  .kd_username_add_right {
  }
}
.kd_pagination {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px 0 20px 20px;
}
</style>
